<template>
    <div class="printer">
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>打印机设置</p>
            </div>
        </div>
        <div class="ip_address">
            <span>当前IP为{{ip_address}}</span>
        </div>

        <div class="check_num">
            <div class="margin ip_inp">
                <label class="ip_label">请输入IP</label>
                <input type="number" v-model="ip_input1" />
                <input type="number" v-model="ip_input2" />
                <input type="number" v-model="ip_input3" />
                <input type="number" v-model="ip_input4" />
            </div>
            <div class="margin">
                <label>请输入端口号</label>
                <input type="number" v-model="port_input" />
            </div>

            <button class="affirm" @click="haveIp()">确认</button>
            <button class="cancel" @click="back()">取消</button>
        </div>
    </div>
    </div>
</template>
<script>
export default {
    name: "printer",
    data() {
        return {
            ip_address: '     空',
            ip_input1: '',
            ip_input2: '',
            ip_input3: '',
            ip_input4: '',
            port_input: ''
        }
    },
    methods: {
        back: function() {
            this.$router.push({ path: "/Nav" });
        },
        haveIp: function() {
            let IP = this.ip_input1 + '.' + this.ip_input2 + '.' + this.ip_input3 + '.' + this.ip_input4;
            let address = IP + ':' + this.port_input;
            this.ip_address = address;
            localStorage.setItem('ip_address', address);
            let this_ = this;
            this_.$layer.alert('添加成功', function() {
                this_.$layer.close(this.id);
                this_.$router.push({ path: "/Nav" });
            })
        }
    },
    created: function() {
        let printIP = localStorage.getItem('ip_address');
        if (printIP) {
            this.ip_address = printIP;
        }
    }
}
</script>
<style lang="css" scoped>
.ip_address {
    width: 100%;
    margin-top: 10%;
}

.ip_address span {
    display: block;
    margin-left: 20%;
    font-size: 15px;
}

.margin {
    margin-top: 1rem;
}

.ip_inp input {
    width: 50px !important;
    margin: 1px;
}

.ip_label {
    display: block;
}

.check_num {
    width: 90%;
    background-color: #f8f8f8;
    position: fixed;
    z-index: 8;
    margin-left: 5%;
    margin-top: 20%;
    padding: 3% 6% 3% 11%;
    border-radius: 0.5rem;
}

.check_num label {
    font-size: 15px;
}

.check_num input {
    width: 90%;
    font-size: 15px;
    height: 3rem;
    padding-left: 4%;
    margin-top: 5px;
    border: 1px solid #D3DCE6;
    border-radius: 6px;
    background: #F9FAFC;
}

.check_num span {
    font-size: 15px;
    text-align: -webkit-center;
    display: -webkit-box;
}

.affirm {
    display: inline-block;
    background: #668292;
    width: 30%;
    height: 3.4rem;
    border-radius: 6px;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 0.5rem 0;
    margin: 17px;
    outline: none;
    font-size: 1.5rem;
}

.cancel {
    display: inline-block;
    background: #fff;
    width: 30%;
    height: 3.4rem;
    border-radius: 6px;
    border: 1px solid #668292;
    color: #668292;
    font-weight: bold;
    padding: 0.5rem 0;
    margin: 17px;
    outline: none;
    font-size: 1.5rem;
}

.is_search {
    width: 85%;
    height: 50px;
    border: 1px solid gray;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
}

.arrow {
    border: 0.15rem solid #fff;
    border-width: 0.15rem 0 0 0.15rem;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(135deg);
    -webkit-transition: all .5s ease-in .1s;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: all .5s ease-in .1s;
}

.return {
    padding-left: 1.5rem;
    width: 44%;
}

.back {
    font-size: 1.3rem;
    color: #fff;
}

.nav {
    line-height: 4.7rem;
    display: -webkit-box;
    background: #668292;
    height: 4.7rem;
}

.nav_text {

    font-size: 1.6rem;
    color: #fff;
}
</style>